<template>
    <div class="classify">
        <div class="tabs">
            <div :class="{ active: active == 0 }" @click="handoff(0)">
                商城系统分类
                <span>
                    商城系统上架商品分类列表
                </span>
            </div>
            <div :class="{ active: active == 1 }" @click="handoff(1)">
                我提交的-分类
                <span>等待系统人员审核分类</span>
            </div>
        </div>
        <div class="classify-container app-container">
            <component :is="component[active]" :data="data">
            </component>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import System from "./components/System.vue";
import Audit from "./components/Audit.vue";

const component = [System, Audit]
const active = ref(0);
const handoff = (index) => {
    active.value = index;
}
</script>

<style lang="scss" scoped>
.classify {
    background: linear-gradient(rgb(228, 239, 254), rgb(245, 248, 255));
    height: 100%;
}

.tabs {
    width: 100%;
    height: 64px;
    display: flex;
    gap: 20px;

    >div {
        width: 282px;
        height: 64px;
        background: #F5F7FA;
        border-radius: 10px 10px 0px 0px;
        text-align: center;
        font-size: 16px;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;

        span {
            color: #86909C;
            font-size: 12px;
        }
    }

    .active {
        background: white;
    }
}

.classify-container {
    height: calc(100% - 64px);
    background: #FFFFFF;
    border-radius: 0 10px 10px 10px;
    box-sizing: border-box;

    ::v-deep(.head) {
        display: flex;
        justify-content: space-between;

        .el-input {
            width: 300px;
        }

        .el-button--primary {
            background: #007DFF;
            border-radius: 0;
        }
    }



    .el-scrollbar {
        height: unset;
    }
}
</style>